<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>EmulatorJS | Translate Languages</title>
    <link
      rel="icon"
      type="image/png"
      href=""
    />
  </head>

  <body>
    <div class="header">
      <h1>Translate Languages</h1>
      <img
        style="width: 150px"
        src=""
      />
    </div>
    <br />
    <div class="boxes">
      <div class="box">
        <button class="copyBtn" id="copyBtn1" onclick="copy('box1')">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            width="18px"
            height="18px"
          >
            <path
              d="M6 4V8H18V4H20.0066C20.5552 4 21 4.44495 21 4.9934V21.0066C21 21.5552 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5551 3 21.0066V4.9934C3 4.44476 3.44495 4 3.9934 4H6ZM8 2H16V6H8V2Z"
            ></path>
          </svg>
        </button>
        <textarea id="box1" rows="39.5" cols="30" spellcheck="false"></textarea>
      </div>
      <div class="box">
        <textarea
          id="box2"
          placeholder="Copy what is on the left into google translate or any other translation service, then translate it into the language you whant and paste the translation here."
          rows="39.5"
          cols="50"
          spellcheck="false"
          oninput="handleBox2Input()"
        ></textarea>
        <button class="nextBtn" onclick="startc()">Next</button>
      </div>
      <div class="box">
        <button class="copyBtn" id="copyBtn3" onclick="copy('box3')">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            width="18px"
            height="18px"
          >
            <path
              d="M6 4V8H18V4H20.0066C20.5552 4 21 4.44495 21 4.9934V21.0066C21 21.5552 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5551 3 21.0066V4.9934C3 4.44476 3.44495 4 3.9934 4H6ZM8 2H16V6H8V2Z"
            ></path>
          </svg>
        </button>
        <textarea
          id="box3"
          placeholder="Then click next and you are done copy this box in to a .json file"
          rows="39.5"
          cols="50"
          spellcheck="false"
        ></textarea>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    var data = {
      "0": "-0",
      "1": "-1",
      "2": "-2",
      "3": "-3",
      "4": "-4",
      "5": "-5",
      "6": "-6",
      "7": "-7",
      "8": "-8",
      "9": "-9",
      "Restart": "-Restart",
      "Pause": "-Pause",
      "Play": "-Play",
      "Save State": "-Save State",
      "Load State": "-Load State",
      "Control Settings": "-Control Settings",
      "Cheats": "-Cheats",
      "Cache Manager": "-Cache Manager",
      "Export Save File": "-Export Save File",
      "Import Save File": "-Import Save File",
      "Netplay": "-Netplay",
      "Mute": "-Mute",
      "Unmute": "-Unmute",
      "Settings": "-Settings",
      "Enter Fullscreen": "-Enter Fullscreen",
      "Exit Fullscreen": "-Exit Fullscreen",
      "Context Menu": "-Context Menu",
      "Reset": "-Reset",
      "Clear": "-Clear",
      "Close": "-Close",
      "QUICK SAVE STATE": "-QUICK SAVE STATE",
      "QUICK LOAD STATE": "-QUICK LOAD STATE",
      "CHANGE STATE SLOT": "-CHANGE STATE SLOT",
      "FAST FORWARD": "-FAST FORWARD",
      "Player": "-Player",
      "Connected Gamepad": "-Connected Gamepad",
      "Gamepad": "-Gamepad",
      "Keyboard": "-Keyboard",
      "Set": "-Set",
      "Add Cheat": "-Add Cheat",
      "Note that some cheats require a restart to disable": "-Note that some cheats require a restart to disable",
      "Create a Room": "-Create a Room",
      "Rooms": "-Rooms",
      "Start Game": "-Start Game",
      "Click to resume Emulator": "-Click to resume Emulator",
      "Drop save state here to load": "-Drop save state here to load",
      "Loading...": "-Loading...",
      "Download Game Core": "-Download Game Core",
      "Outdated graphics driver": "-Outdated graphics driver",
      "Decompress Game Core": "-Decompress Game Core",
      "Download Game Data": "-Download Game Data",
      "Decompress Game Data": "-Decompress Game Data",
      "Shaders": "-Shaders",
      "Disabled": "-Disabled",
      "2xScaleHQ": "-2xScaleHQ",
      "4xScaleHQ": "-4xScaleHQ",
      "CRT easymode": "-CRT easymode",
      "CRT aperture": "-CRT aperture",
      "CRT geom": "-CRT geom",
      "CRT mattias": "-CRT mattias",
      "FPS": "-FPS",
      "show": "-show",
      "hide": "-hide",
      "Fast Forward Ratio": "-Fast Forward Ratio",
      "Fast Forward": "-Fast Forward",
      "Enabled": "-Enabled",
      "Save State Slot": "-Save State Slot",
      "Save State Location": "-Save State Location",
      "Download": "-Download",
      "Keep in Browser": "-Keep in Browser",
      "Auto": "-Auto",
      "NTSC": "-NTSC",
      "PAL": "-PAL",
      "Dendy": "-Dendy",
      "8:7 PAR": "-8:7 PAR",
      "4:3": "-4:3",
      "Low": "-Low",
      "High": "-High",
      "Very High": "-Very High",
      "None": "-None",
      "Player 1": "-Player 1",
      "Player 2": "-Player 2",
      "Both": "-Both",
      "SAVED STATE TO SLOT": "-SAVED STATE TO SLOT",
      "LOADED STATE FROM SLOT": "-LOADED STATE FROM SLOT",
      "SET SAVE STATE SLOT TO": "-SET SAVE STATE SLOT TO",
      "Network Error": "-Network Error",
      "Submit": "-Submit",
      "Description": "-Description",
      "Code": "-Code",
      "Add Cheat Code": "-Add Cheat Code",
      "Leave Room": "-Leave Room",
      "Password": "-Password",
      "Password (optional)": "-Password (optional)",
      "Max Players": "-Max Players",
      "Room Name": "-Room Name",
      "Join": "-Join",
      "Player Name": "-Player Name",
      "Set Player Name": "-Set Player Name",
      "Left Handed Mode": "-Left Handed Mode",
      "Virtual Gamepad": "-Virtual Gamepad",
      "Disk": "-Disk",
      "Press Keyboard": "-Press Keyboard",
      "INSERT COIN": "-INSERT COIN",
      "Remove": "-Remove",
      "SAVE LOADED FROM BROWSER": "-SAVE LOADED FROM BROWSER",
      "SAVE SAVED TO BROWSER": "-SAVE SAVED TO BROWSER",
      "Join the discord": "-Join the discord",
      "View on GitHub": "-View on GitHub",
      "Failed to start game": "-Failed to start game",
      "Download Game BIOS": "-Download Game BIOS",
      "Decompress Game BIOS": "-Decompress Game BIOS",
      "Download Game Parent": "-Download Game Parent",
      "Decompress Game Parent": "-Decompress Game Parent",
      "Download Game Patch": "-Download Game Patch",
      "Decompress Game Patch": "-Decompress Game Patch",
      "Download Game State": "-Download Game State",
      "Check console": "-Check console",
      "Error for site owner": "-Error for site owner",
      "EmulatorJS": "-EmulatorJS",
      "Clear All": "-Clear All",
      "Take Screenshot": "-Take Screenshot",
      "Start screen recording": "-Start screen recording",
      "Stop screen recording": "-Stop screen recording",
      "Quick Save": "-Quick Save",
      "Quick Load": "-Quick Load",
      "REWIND": "-REWIND",
      "Rewind Enabled (requires restart)": "-Rewind Enabled (requires restart)",
      "Rewind Granularity": "-Rewind Granularity",
      "Slow Motion Ratio": "-Slow Motion Ratio",
      "Slow Motion": "-Slow Motion",
      "Home": "-Home",
      "EmulatorJS License": "-EmulatorJS License",
      "RetroArch License": "-RetroArch License",
      "This project is powered by": "-This project is powered by",
      "View the RetroArch license here": "-View the RetroArch license here",
      "SLOW MOTION": "-SLOW MOTION",
      "A": "-A",
      "B": "-B",
      "SELECT": "-SELECT",
      "START": "-START",
      "UP": "-UP",
      "DOWN": "-DOWN",
      "LEFT": "-LEFT",
      "RIGHT": "-RIGHT",
      "X": "-X",
      "Y": "-Y",
      "L": "-L",
      "R": "-R",
      "Z": "-Z",
      "STICK UP": "-STICK UP",
      "STICK DOWN": "-STICK DOWN",
      "STICK LEFT": "-STICK LEFT",
      "STICK RIGHT": "-STICK RIGHT",
      "C-PAD UP": "-C-PAD UP",
      "C-PAD DOWN": "-C-PAD DOWN",
      "C-PAD LEFT": "-C-PAD LEFT",
      "C-PAD RIGHT": "-C-PAD RIGHT",
      "MICROPHONE": "-MICROPHONE",
      "BUTTON 1 / START": "-BUTTON 1 / START",
      "BUTTON 2": "-BUTTON 2",
      "BUTTON": "-BUTTON",
      "LEFT D-PAD UP": "-LEFT D-PAD UP",
      "LEFT D-PAD DOWN": "-LEFT D-PAD DOWN",
      "LEFT D-PAD LEFT": "-LEFT D-PAD LEFT",
      "LEFT D-PAD RIGHT": "-LEFT D-PAD RIGHT",
      "RIGHT D-PAD UP": "-RIGHT D-PAD UP",
      "RIGHT D-PAD DOWN": "-RIGHT D-PAD DOWN",
      "RIGHT D-PAD LEFT": "-RIGHT D-PAD LEFT",
      "RIGHT D-PAD RIGHT": "-RIGHT D-PAD RIGHT",
      "C": "-C",
      "MODE": "-MODE",
      "FIRE": "-FIRE",
      "RESET": "-RESET",
      "LEFT DIFFICULTY A": "-LEFT DIFFICULTY A",
      "LEFT DIFFICULTY B": "-LEFT DIFFICULTY B",
      "RIGHT DIFFICULTY A": "-RIGHT DIFFICULTY A",
      "RIGHT DIFFICULTY B": "-RIGHT DIFFICULTY B",
      "COLOR": "-COLOR",
      "B/W": "-B/W",
      "PAUSE": "-PAUSE",
      "OPTION": "-OPTION",
      "OPTION 1": "-OPTION 1",
      "OPTION 2": "-OPTION 2",
      "L2": "-L2",
      "R2": "-R2",
      "L3": "-L3",
      "R3": "-R3",
      "L STICK UP": "-L STICK UP",
      "L STICK DOWN": "-L STICK DOWN",
      "L STICK LEFT": "-L STICK LEFT",
      "L STICK RIGHT": "-L STICK RIGHT",
      "R STICK UP": "-R STICK UP",
      "R STICK DOWN": "-R STICK DOWN",
      "R STICK LEFT": "-R STICK LEFT",
      "R STICK RIGHT": "-R STICK RIGHT",
      "Start": "-Start",
      "Select": "-Select",
      "Fast": "-Fast",
      "Slow": "-Slow",
      "a": "-a",
      "b": "-b",
      "c": "-c",
      "d": "-d",
      "e": "-e",
      "f": "-f",
      "g": "-g",
      "h": "-h",
      "i": "-i",
      "j": "-j",
      "k": "-k",
      "l": "-l",
      "m": "-m",
      "n": "-n",
      "o": "-o",
      "p": "-p",
      "q": "-q",
      "r": "-r",
      "s": "-s",
      "t": "-t",
      "u": "-u",
      "v": "-v",
      "w": "-w",
      "x": "-x",
      "y": "-y",
      "z": "-z",
      "enter": "-enter",
      "escape": "-escape",
      "space": "-space",
      "tab": "-tab",
      "backspace": "-backspace",
      "delete": "-delete",
      "arrowup": "-arrowup",
      "arrowdown": "-arrowdown",
      "arrowleft": "-arrowleft",
      "arrowright": "-arrowright",
      "f1": "-f1",
      "f2": "-f2",
      "f3": "-f3",
      "f4": "-f4",
      "f5": "-f5",
      "f6": "-f6",
      "f7": "-f7",
      "f8": "-f8",
      "f9": "-f9",
      "f10": "-f10",
      "f11": "-f11",
      "f12": "-f12",
      "shift": "-shift",
      "control": "-control",
      "alt": "-alt",
      "meta": "-meta",
      "capslock": "-capslock",
      "insert": "-insert",
      "home": "-home",
      "end": "-end",
      "pageup": "-pageup",
      "pagedown": "-pagedown",
      "!": "-!",
      "@": "-@",
      "#": "-#",
      "$": "-$",
      "%": "-%",
      "^": "-^",
      "&": "-&",
      "*": "-*",
      "(": "-(",
      ")": "-)",
      "-": "--",
      "_": "-_",
      "+": "-+",
      "=": "-=",
      "[": "-[",
      "]": "-]",
      "{": "-{",
      "}": "-}",
      ";": "-;",
      ":": "-:",
      "'": "-'",
      "\"": "-\"",
      ",": "-,",
      ".": "-.",
      "<": "-<",
      ">": "->",
      "/": "-/",
      "?": "-?",
      "LEFT_STICK_X": "-LEFT_STICK_X",
      "LEFT_STICK_Y": "-LEFT_STICK_Y",
      "RIGHT_STICK_X": "-RIGHT_STICK_X",
      "RIGHT_STICK_Y": "-RIGHT_STICK_Y",
      "LEFT_TRIGGER": "-LEFT_TRIGGER",
      "RIGHT_TRIGGER": "-RIGHT_TRIGGER",
      "A_BUTTON": "-A_BUTTON",
      "B_BUTTON": "-B_BUTTON",
      "X_BUTTON": "-X_BUTTON",
      "Y_BUTTON": "-Y_BUTTON",
      "START_BUTTON": "-START_BUTTON",
      "SELECT_BUTTON": "-SELECT_BUTTON",
      "L1_BUTTON": "-L1_BUTTON",
      "R1_BUTTON": "-R1_BUTTON",
      "L2_BUTTON": "-L2_BUTTON",
      "R2_BUTTON": "-R2_BUTTON",
      "LEFT_THUMB_BUTTON": "-LEFT_THUMB_BUTTON",
      "RIGHT_THUMB_BUTTON": "-RIGHT_THUMB_BUTTON",
      "DPAD_UP": "-DPAD_UP",
      "DPAD_DOWN": "-DPAD_DOWN",
      "DPAD_LEFT": "-DPAD_LEFT",
      "DPAD_RIGHT": "-DPAD_RIGHT"
    }

    let data1 = '';
    for (let i = 0; i < Object.keys(data).length; i++) {
      data1 = data1+Object.keys(data)[i]+'\n';
    }
    data1 = data1.slice(0, -1);
    document.getElementById('box1').value = data1;
    function startc(){
      var data2 = document.getElementById('box1').value;
      var data3 = document.getElementById('box2').value;
      var data4 = data2.split('\n').map(function(line){ return line.split(/\n/g);});
      var data5 = data3.split('\n').map(function(line){ return line.split(/\n/g);});
      var data6 = new Map();
      for (var i = 0; i < data4.length; i++) {
        data6.set(data4[i], data5[i]);
      }
      var data7 = {};
      data6.forEach(function(value, key) {
        data7[key] = value[0];
      });
      data7 = JSON.stringify(data7,null,4);
      document.getElementById('box3').value = data7;
      toggleCopyButton('box3','copyBtn3');
      navigator.clipboard.writeText(document.getElementById('box3').value);
      console.log(data7);
    }

    function toggleCopyButton(textareaId,buttonId) {
      var textarea = document.getElementById(textareaId);
      var button = document.getElementById(buttonId);
      if (textarea.value.trim() !== '') {
        button.style.display = 'block';
      } else {
        button.style.display = 'none';
      }
    }

    function copy(textareaId) {
      var textarea = document.getElementById(textareaId);
      textarea.select();
      document.execCommand('copy');
    }

    document.addEventListener('DOMContentLoaded',function() {
      toggleCopyButton('box1','copyBtn1');
      toggleCopyButton('box3','copyBtn3');
    })

    function handleBox2Input() {
      var box2 = document.getElementById('box2');
      var box3 = document.getElementById('box3');
      var copyBtn3 = document.getElementById('copyBtn3');

      if (!box2.value.trim()) {
        box3.value = ''
        copyBtn3.style.display = 'none'
      }
    }
  </script>

  <style>
    :root {
      --bg: #f6f5f2;
      --color-primary: #09a0c1;
      --color-secondary: #1ad6ff;
      --success: #01b12d;
    }

    body {
      background-color: var(--bg);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
        sans-serif;
    }

    .header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 3rem;
    }

    .boxes {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }

    textarea {
      padding: 12px 20px;
      border: 2px solid #ccc;
      border-radius: 4px;
      background-color: #f8f8f8;
      height: 50vh;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
        sans-serif;
    }

    #box3:not(:placeholder-shown) {
      color: var(--success);
    }

    textarea::placeholder {
      font-size: 1rem;
    }

    textarea:focus-visible {
      outline: 2px solid var(--color-primary);
    }

    .box {
      position: relative;
    }

    button {
      appearance: none;
      background-color: var(--color-primary);
      border: none;
      border-radius: 0.5rem;
      padding: 0.625rem 1.25rem;
      color: #fff;
      position: absolute;
      cursor: pointer;
    }

    button:hover {
      background-color: var(--color-secondary);
    }

    .nextBtn {
      bottom: 1rem;
      right: 1rem;
    }

    .copyBtn {
      display: none;
      top: 1rem;
      right: 1rem;
    }
  </style>
</html>
